<template>
    <a-modal v-model:visible="modalInfo.visible" :width="800" :title="modalInfo.title" :mask-closable="false"
        @ok="submit" :hide-cancel="true">
        <a-spin :loading="modalInfo.loading" tip="加载中，请稍后···">
            <div class="ma-content-block lg:flex justify-between" v-if="tableData && tableData.length > 0">
                <a-collapse :default-active-key="[0]" style="width: 760px;height:500px;overflow-y: scroll;"
                    :bordered="false">
                    <div v-for="(item, index) in tableData" :key="item.logs">
                        <a-collapse-item :header="item.date" :key="index">
                            <div v-for="(log, logIndex) in item.logs" :key="log.id">
                                <div> <span class="txt">{{ '【 ' + log.time_text + ' 】' }}</span> <span class="msg">{{
                                        log.api_name }}</span></div>
                            </div>
                        </a-collapse-item>
                    </div>
                </a-collapse>
            </div>
            <div v-else style="width: 760px;text-align: center;font-size: 18px;line-height: 180px;">暂无推送记录</div>
        </a-spin>
    </a-modal>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from 'vue'
import AsApi from '@/api/system/afterSale'
const modalInfo = ref({
    visible: false,
    title: '',
    loading: false
})
const searchForm = ref({
    date: '',
    keyword: '',
    admin_id: ''
})
const open = async (data) => {
    modalInfo.value.loading = true
    modalInfo.value.title =  '推送记录'
    modalInfo.value.visible = true
    searchForm.value.admin_id = data.id
    await initPage(data.id)
}
const tableData = ref([])
const indexList = ref([])
const initPage = async (id) => {
    indexList.value = []
    const { data } = await AsApi.send_record(id)
    const arrayData = Object.entries(data).map(([date, logs], index) => {
        indexList.value.push(Number(index));
        return { date, logs };
    });
    modalInfo.value.loading = false
    tableData.value = arrayData
}
const submit = () => {
    modalInfo.value.visible = false
}
onMounted(async () => {
    // initPage()
})
defineExpose({ open })
</script>

<style scoped>
:deep(.arco-collapse-item-header-title) {
    font-size: 23px !important;
    line-height: 30px;
    color: orangered;
}

.txt {
    color: #80aba9;
}

.msg {
    margin-left: 20px;
    font-size: 16px;
    line-height: 40px;
}
</style>